<template>
  <div class="app-container">
    <el-form>
      <el-date-picker
        v-model="day"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>


<!--      <el-date-picker  v-model="startDay" type="date" value-format="yyyy-MM-dd" placeholder="选择要统计开始的日期"/>-->
<!--      <el-date-picker  v-model="endDay" type="date" value-format="yyyy-MM-dd" placeholder="选择要统计结束的日期"/>-->
      <el-button :disabled="btnDisabled" type="primary" icon="el-icon-search" @click="showChart()" >查询</el-button>
    </el-form>

    <el-row>
      <el-col :span="12">
        <div id="register_num" class="chart" style="height:500px;" />
      </el-col>
      <el-col :span="12">
        <div id="login_num" class="chart" style="height:500px;" />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="video_view_num" class="chart" style="height:500px;" />
      </el-col>
      <el-col :span="12">
        <div id="course_num" class="chart" style="height:500px;" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import statisticsApi from '@/api/statistics'
  export default {
    name: 'chart',
    data() {
      return {
        day:[],
        begin:'',
        end:'',
        btnDisabled: false,
        chartData: {}
      }
    },
    methods: {
      showChart() {
        console.log("this.day",this.day)
        this.begin = this.day[0].getFullYear() + '-' + (this.day[0].getMonth() + 1) + '-' + this.day[0].getDate();
        this.end = this.day[1].getFullYear() + '-' + (this.day[1].getMonth() + 1) + '-' + this.day[1].getDate();
        console.log("this.day[0]",this.begin)
        console.log("this.day[1]",this.end)
        statisticsApi.showChart(this.begin,this.end).then(res => {
          this.chartData = res.data.chartData
          this.showChartByType('register_num', '学员登录数统计', this.chartData.registerNum)
          this.showChartByType('login_num', '学员注册数统计', this.chartData.loginNum)
          this.showChartByType('video_view_num', '课程播放数统计', this.chartData.videoViewNum)
          this.showChartByType('course_num', '每日课程数统计', this.chartData.courseNum)
        })

      },
      showChartByType(type,title,data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(type))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: title
            },
            xAxis: {
              data: res.data.xDate

            },
            yAxis: {},
            series: [{
              type: 'line',
              data: res.data.yDate
            }]
          }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
